<template>
	<div class="theme">
		<div class="overlay">
			<div class="overlay-content scrolling">
				<van-nav-bar title="钱包详情" left-text left-arrow @click-left="$router.back()">
				</van-nav-bar>
				<div class="walletDetail">
					<div class="walletDetail-content">
						<van-cell-group>
							<van-cell title="更换头像" @click="show = true">
								<div slot="icon">
									<img src="../../assets/images/walletDetail1.png" width="25px" style="margin: 0 10px;" />
								</div>
								<div slot="right-icon">
									<img src="../../assets/images/walletManage1.png" width="45px" style="position: absolute;top:50%;right: 16px;transform: translateY(-50%);" />
								</div>
							</van-cell>
							<van-cell title="更换钱包名" @click="show2 = true">
								<div slot="icon">
									<img src="../../assets/images/walletDetail2.png" width="25px" style="margin: 0 10px;" />
								</div>
								<span style="color: #0070e0;">DKALEI钱包</span>
							</van-cell>
						</van-cell-group>
					</div>
				</div>
				<van-dialog v-model="show" title="选择头像" class="portrait">
					<div class="portrait-content">
						<div v-for="(item,i) in 16" :key="i">
							<img src="../../assets/images/walletManage1.png" width="60px" @click="showImg = i" />
							<img src="../../assets/images/walletManage6.png" width="20px" v-show="showImg === i" />
						</div>
					</div>
				</van-dialog>
				<van-dialog v-model="show2" title="更换钱包名" class="updateWalletName" show-cancel-button confirm-button-color="#0070e0" cancel-button-color="#0070e0">
					<div class="updateWalletName-content">
						<van-field v-model="walletName" placeholder=""></van-field>
					</div>
				</van-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	export default {
		name: 'WalletDetail',
		components: {},
		props: {},
		data() {
			return {
				show: false,
				show2: false,
				showImg: 0,
				walletName: '',
			};
		},
		beforeCreate() {
			_this = this;
		},
		watch: {},
		computed: {},
		methods: {

		},
		created() {

		},
		mounted() {

		},
		destroyed() {

		},
		filters: {}
	};
</script>

<style lang="less" scoped>
	.overlay {
		background: #f2f6f7;
		img,
		i {
			vertical-align: text-bottom;
		}
	}
	
	.portrait {
		.portrait-content {
			display: flex;
			flex-wrap: wrap;
			padding: 10px 20px;
			div {
				position: relative;
				flex: 1 25%;
				text-align: center;
				margin-bottom: 10px;
				img:last-child {
					position: absolute;
					top: 0;
					right: 0;
				}
			}
		}
	}
	
	.updateWalletName {
		background: #f2f6f7;
		border-radius: 7px;
		.van-cell {
			background: #f2f6f7;
		}
		/deep/.van-cell__value {
			background: #FFFFFF;
			padding: 5px 10px;
		}
	}
	
	.walletDetail {
		.walletDetail-content {
			margin: 20px 0;
		}
		.van-cell__title {
			margin-left: 10px;
			span {
				color: #333333;
			}
		}
		.van-cell__label {
			color: #666666;
			margin-top: 0px;
		}
		.van-cell:not(:last-child)::after {
			left: 71px;
		}
	}
</style>